<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侦听器</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div class="box">
        <input type="text" v-model="firstName"><br>
        <input type="text" v-model="lastName"><br>
        <input type="text" v-model="fullName"><br>
        <input type="text" v-model="obj.age">
        <hr>
        <input type="text" v-model="fullName1"><br>
        <input type="text" v-model="obj2.age">
    </div>
    <script>
        let vm = new Vue({
            el:'.box',
            data:{
                firstName:'sun',
                lastName:'wukong',
                fullName:'sun-wukong',
                fullName1:'sun-wukong',
                obj:{
                    name:'jack',
                    age:18
                },
                obj2:{
                    name:'rose',
                    age:15
                }
            },
            //一、在vue对象中设置 侦听器
            watch:{
                //监视的属性名
                firstName(value){
                    //value是改变后的值
                    this.fullName = value + '-' + this.lastName;
                },
                lastName:{
                    handler(value){
                        this.fullName = this.firstName +'-'+value;
                    }
                },
                fullName(value){
                    let arr = value.split('-');
                    this.firstName = arr[0];
                    this.lastName = arr[1];
                },
                //监听应用数据类型变化时，不能使用简写，必须写deep深度监视
                obj:{
                    handler(value){
                        console.log(value);
                    },
                    deep:true,//深度监视
                    // immediate:true//立即执行
                }

            }
        });
        //二、在vue实例对象vm上设置
        //监视的属性值
        vm.$watch('fullName1',(newValue,oldValue)=>{

            console.log(newValue,oldValue);
        },{
            deep:true,//深度监视
            // immediate:true//立即执行
            //注意：立即执行时  oldValue = undefined  因为没有旧值
        });
        //监听应用数据类型的时候
        vm.$watch('obj2',(newValue,oldValue)=>{
            console.log(newValue,oldValue);
        },{
            //在侦听引用数据类型的时候 newValue与oldValue的值是一样的，因为他们的地址指针是一样的
            deep:true,
            immediate:true//立即执行   {__ob__: Observer} undefined
        })
    </script>
</body>
</html>